<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加商品</title>
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入通用css -->
    <link rel="stylesheet" href="../common/public.css" />
    <!-- 引入样式vant -->
    <link rel="stylesheet" href="../common/ui/vant-ui/ui.css" />
    <script src="../common/ui/vant-ui/ui.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
  </head>
  <body>
    <div id="app">
      <main-top></main-top>
      <div class="mainCenter">
        <div class="leftContent pore">
          <div class="pd20">
            <div class="fwb ndis500"><van-icon name="arrow-left" size="20" /></div>
            <div class="fwb fs18 mgt20">添加商品</div>
            <div class="fs14 mgt10 c8">
              可以填写APP应用，网站平台，实体商品，服务方案等不同类型产品的介绍
            </div>
            <div class="pdx bdline flex jcsb aic">
              <div class="fs18">
                产品Logo <span class="fs14 c9">(上传或选择)</span>
              </div>
              <van-uploader
                ><div class="updateBox"><van-icon name="plus" class="c9" /></div
              ></van-uploader>
            </div>
            <div class="pdx bdline flex jcsb aic" v-for="i in list">
              <div>
                <div class="fs12">{{ i.name }}</div>
                <input
                  v-model="i.value"
                  :placeholder="i.pl"
                  class="linput"
                  :disabled="i.islink"
                />
              </div>
              <div class="c9"><van-icon name="arrow" v-if="i.islink" /></div>
            </div>
            <div class="pdx">
              <div class="fwb fs14">相关图片</div>
              <div class="fs12 c9 mgb10">选填，最多上传5张</div>
              <van-uploader
                ><div class="updateBox"><van-icon name="plus" class="c9" /></div
              ></van-uploader>
            </div>
          </div>
          <div class="safeFoot"></div>
          <div class="footer">
            <van-button class="btn" :disabled="isall">保存</van-button>
          </div>
        </div>
        <lan-adright></lan-adright>
      </div>
      <main-footer class="bd"></main-footer>
    </div>
  </body>
</html>
<style>
  body {
    background-color: #fff;
  }
  .pdx {
    padding: 20px 0;
  }
  .updateBox {
    width: 50px;
    height: 50px;
    border: 1px dashed #999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    border-radius: 5px;
  }
  .linput {
    width: 250px;
    border: none;
    margin-top: 8px;
    font-size: 0.97rem;
  }
  .linput::placeholder {
    color: #d4d0d0;
  }
  .linput:disabled {
    background-color: #fff;
  }
</style>
<script>
  new Vue({
    el: "#app",
    data: {
      user: {},
      list: [
        { name: "产品名称", value: "", pl: "填写产品或服务的名称" },
        {
          name: "产品介绍",
          value: "",
          pl: "更多关键信息，突出特色与亮点",
          islink: true,
        },
        {
          name: "产品Slogan",
          value: "",
          pl: "选填，产品用于宣传的标语或口号",
          noLimit: true,
        },
      ],
    },
    computed: {
      isall() {
        return !this.list.every((i) => i.value || i.noLimit);
      },
    },
    components: {
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "lan-adright": httpVueLoader("../common/commpent/lan/adRight.vue"),
    },
    methods: {},
  });
</script>
